<template>
  <view class="my-picker flexc">
    <view class="picker-title flexr align-center justify-center">
      请选择导购员
      <image
        class="close"
        src="@/static/close.png"
        @click="emits('onCancel')"
      ></image>
    </view>
    <view class="picker-list flex-1 flexc">
      <view
        class="picker-item flexr align-center"
        :class="{ active: index === selectedIndex }"
        v-for="(item, index) in items"
				@click="selectedIndex = index"
        :key="index"
      >
        <image class="picker-item-icon" src="@/static/applogo.png"></image>
        <view class="flex-1 flexc item-text">
          <view class="name">
            {{ item.clerk_Name }}
          </view>
          <view class="phone">
            {{ item.mobile }}
          </view>
        </view>
        <image
          v-if="index == selectedIndex"
          class="check"
          src="@/static/check.png"
        ></image>
      </view>
    </view>
    <view class="btns flexr justify-center">
      <view class="btn cancel-button" @click="emits('onCancel')"> 取消 </view>
      <view class="btn primary-button" @click="onConfirm"> 确定 </view>
    </view>
  </view>
</template>

<script setup>
import { watch, ref } from "vue";

const props = defineProps({
  index: Number,
  items: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits(["onCancel", "onConfirm"]);
const selectedIndex = ref(props.index);
watch(
  () => props.index,
  (val) => {
    selectedIndex.value = val;
  }
);

function onConfirm() {
  emits("onConfirm", selectedIndex.value);
}
</script>

<style lang="scss">
.my-picker {
  height: 880rpx;
  box-sizing: border-box;
  background-color: white;
  overflow: hidden;
  border-top-right-radius: 30rpx;
  border-top-left-radius: 30rpx;
  .picker-title {
    height: 112rpx;
    background-color: rgba(250, 250, 250, 1);
    color: $text-color1;
    font-size: 32rpx;
    position: relative;
    margin-bottom: 20rpx;
    min-height: 112rpx;
    .close {
      width: 50rpx;
      height: 50rpx;
      padding: 10rpx;
      box-sizing: border-box;
      position: absolute;
      right: 25rpx;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  .picker-list {
    overflow-y: scroll;
  }
  .picker-item {
    height: 120rpx;
    min-height: 120rpx;
    padding: 0 32rpx;
    position: relative;
    &-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }
    .item-text {
      margin-left: 25rpx;
      padding-bottom: 10rpx;
      border-bottom: 1rpx solid $divider-color;
      .name {
        font-size: 32rpx;
        color: $text-color1;
      }
      .phone {
        margin-top: 8rpx;
        color: $text-color2;
      }
    }
    &.active {
      background-color: rgba(52, 181, 160, 0.08);
    }
    .check {
      width: 36rpx;
      height: 27rpx;
      position: absolute;
      right: 32rpx;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  .btns {
    margin-top: 20rpx;
    .btn {
      width: 300rpx;
    }
    .btn + .btn {
      margin-left: 30rpx;
    }
  }
}
</style>
